<!-- 选择场景 -->
<template>
    <div class="create-wrapper">
        <div class="create-title">选择你要创建的场景</div>

        <el-row :gutter="20" class="scene-ul">
            <router-link v-for="item in list" :key="item.name" :to="'/create/' + item.path" >
                <el-col :span="8" >
                    <el-card class="box-card">
                        <i :class="'icons icon '+ item.icon" :style="'color:' + item.color"></i>
                        <div class="text">
                            {{ item.title }}
                        </div>
                        <div class="sec-text">{{ item.sec_title }}</div>
                    </el-card>
                </el-col>
            </router-link>
        </el-row>
    </div>
</template>

<script>
    import instance from "../../assets/config/instance";

    export default {
        name: "CreateScene",
        data(){
            return {
                list : instance.type
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../../assets/theme";

    .create-wrapper{
        //width: 1024px;
        //margin: 0 auto;

        .box-card{
            padding: 0px;
            height: 166px;
            margin-bottom: 20px;
            text-align: center;

            .icons{
                font-size: 46px;
                line-height: 70px;
            }
            .text{
                text-align: center;
                font-size: 18px;
                line-height: 22px;
            }
            .sec-text{
                font-size: 14px;
                line-height: 32px;
                color: #999999;
            }
        }
    }
</style>